<template>
  <view class="w-screen h-screen">
    <u-navbar
      :is-back="false"
      title="支付结果"
      title-size="36"
      title-color="#333"
      :border-bottom="false"
    >
      <view class="slot-content">
        <u-icon name="close" @click="complete"></u-icon>
      </view>
    </u-navbar>
    <view class="flex flex-col items-center" v-if="payInfo">
      <view class="flex-1 flex flex-col items-center w-full mt-100rpx">
        <text v-if="payInfo.body" class="text-28rpx">{{ payInfo.body }}</text>
        <view class="flex items-baseline mt-20rpx">
          <text class="text-28rpx price-font">¥</text>
          <text class="text-36rpx font-700 price-font"
            >{{ (payInfo.price * 0.01).toFixed(2) }}
          </text>
        </view>
        <view
          class="flex items-baseline mt-20rpx"
          :style="{ color: payInfo.status == 10 ? '#06c05d' : '#cc0000' }"
        >
          <text class="text-36rpx font-500"
            >{{ payInfo.status == 10 ? '支付成功' : '支付失败' }}
          </text>
        </view>
      </view>
      <view class="mt-100rpx">
        <button
          class="w-380rpx h-80rpx text-28rpx flex-center font-500 rounded-btn"
          @click="complete"
        >
          完成
        </button>
      </view>
      <view v-if="showGiftPopup" class="gift-container mt-100rpx">
        <text class="gift-title">恭喜！获得以下赠品：</text>
        <view class="gift-content">
          <text v-for="(item, index) in grantedGift" :key="index"
            >{{ index === 0 ? '' : '、' }}{{ item }}</text
          >
        </view>
      </view>
      <view
        v-if="showRedPacketPopup"
        class="redpacket-container"
        :class="showGiftPopup ? 'mt-20rpx' : 'mt-100rpx'"
      >
        <view class="redpacket-header">
          <text class="redpacket-title">恭喜发财</text>
        </view>
        <view class="redpacket-content">
          <text class="redpacket-desc">¥</text>
          <text class="redpacket-amount">{{ (grantedRedPacketAmount * 0.01).toFixed(2) }}</text>
        </view>
        <view class="redpacket-footer">
          <text class="redpacket-wish">敬请收下消费红包</text>
        </view>
        <view class="redpacket-decoration-top"></view>
        <view class="redpacket-decoration-bottom"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tradeNo: '',
      returnPage: null,
      payInfo: null,
      payInfoRequestNum: 0,
      payInfoCallbackId: undefined,
      giftRequestNum: 0,
      giftCallbackId: undefined,
      showGiftPopup: false,
      grantedGift: '',
      redPacketRequestNum: 0,
      redPacketCallbackId: undefined,
      showRedPacketPopup: false,
      grantedRedPacketAmount: 0
    }
  },
  onBackPress(options) {
    console.debug('onBackPress', options)
    // 返回 true 表示阻止默认返回行为，由你自己处理返回逻辑
    this.complete()
    return true
  },
  methods: {
    onLoad(option) {
      this.tradeNo = option.tradeNo || ''
      this.returnPage = option.returnPage
      this.getPayInfo()
      this.getGift()
      this.getRedPacket()
    },
    getPayInfo() {
      uni.showLoading({
        title: '支付结果获取中'
      })
      this.$u
        .get('/app-api/pay/order/get?tradeNo=' + this.tradeNo + '&sync=true')
        .then((res) => {
          if (!this.$u.test.isEmpty(res.data)) {
            if (res.data.status === 0 && this.payInfoRequestNum < 5) {
              this.payInfoRequestNum++
              // 等待第三方支付结果异步通知，故此处延时轮询
              this.payInfoCallbackId = setTimeout(() => {
                this.getPayInfo()
              }, 1000)
              return
            }
            this.payInfo = res.data
            if (this.payInfoCallbackId) {
              clearTimeout(this.payInfoCallbackId)
              this.payInfoCallbackId = null
            }
            uni.hideLoading()
          } else {
            if (this.payInfoCallbackId) {
              clearTimeout(this.payInfoCallbackId)
              this.payInfoCallbackId = null
            }
            uni.hideLoading()
          }
        })
        .catch(() => {
          uni.hideLoading()
        })
    },
    getGift() {
      this.$u.get('/app-api/promotion/gift/record/granted?tradeNo=' + this.tradeNo).then((res) => {
        if (res.code === 0 && res.data) {
          this.grantedGift = res.data.map((item) =>
            item.giftActivity ? item.giftActivity.name : item.giftTypeName
          )
          this.showGiftPopup = this.grantedGift && this.grantedGift.length > 0
          if (this.giftCallbackId) {
            clearTimeout(this.giftCallbackId)
            this.giftCallbackId = null
          }
        }
        if (!this.showGiftPopup && this.giftRequestNum < 5) {
          this.giftRequestNum++
          // 赠品异步发放有延迟，故此处延时轮询
          this.giftCallbackId = setTimeout(() => {
            this.getGift()
          }, 1500)
        }
      })
    },
    getRedPacket() {
      this.$u
        .get('/app-api/promotion/redpacket/record/granted?tradeNo=' + this.tradeNo)
        .then((res) => {
          if (res.code === 0) {
            this.grantedRedPacketAmount = Number(res.data)
            this.showRedPacketPopup = this.grantedRedPacketAmount > 0
            if (this.redPacketCallbackId) {
              clearTimeout(this.redPacketCallbackId)
              this.redPacketCallbackId = null
            }
          }
          if (!this.showRedPacketPopup && this.redPacketRequestNum < 5) {
            this.redPacketRequestNum++
            // 红包异步发放有延迟，故此处延时轮询
            this.redPacketCallbackId = setTimeout(() => {
              this.getRedPacket()
            }, 1500)
          }
        })
    },
    complete() {
      const that = this
      if (that.payInfoCallbackId) {
        clearTimeout(that.payInfoCallbackId)
        that.payInfoCallbackId = null
      }
      if (that.giftCallbackId) {
        clearTimeout(that.giftCallbackId)
        that.giftCallbackId = null
      }
      if (that.redPacketCallbackId) {
        clearTimeout(that.redPacketCallbackId)
        that.redPacketCallbackId = null
      }
      uni.reLaunch({
        url: '/pages/ucenter/ucenter',
        complete: () => {
          if (that.returnPage) {
            uni.navigateTo({
              url: decodeURIComponent(that.returnPage)
            })
          }
        }
      })
    }
  }
}
</script>

<style lang="css" scoped>
.slot-content {
  margin-left: 20rpx;
}

.text-black {
  color: #333;
}

.price-font {
  font-size: 26rpx;
  color: orangered;
}

/* 以下样式从 UnoCSS 转化而来 */

.w-screen {
  width: 100vw;
}

.h-screen {
  height: 100vh;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.flex-1 {
  flex: 1;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.font-500 {
  font-weight: 500;
}

.text-36rpx {
  font-size: 36rpx;
}

.mt-20rpx {
  margin-top: 20rpx;
}

.mt-100rpx {
  margin-top: 100rpx;
}

.w-380rpx {
  width: 380rpx;
}

.h-80rpx {
  height: 80rpx;
}

.text-28rpx {
  font-size: 28rpx;
}

.rounded-btn {
  background: #10a391;
  color: white;
  border-radius: 20rpx;
}

.gift-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.gift-content {
  display: flex;
  align-items: baseline;
  font-weight: bold;
}

.redpacket-container {
  width: 300rpx;
  position: relative;
  background: linear-gradient(135deg, #d32f2f, #b71c1c);
  border-radius: 15rpx;
  padding: 40rpx 20rpx 30rpx;
  box-shadow: 0 10rpx 30rpx rgba(179, 27, 27, 0.5);
  overflow: hidden;
  min-height: 400rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.redpacket-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20rpx;
  background: linear-gradient(90deg, transparent, #ffd700, transparent);
  opacity: 0.7;
}

.redpacket-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20rpx;
  background: linear-gradient(90deg, transparent, #ffd700, transparent);
  opacity: 0.7;
}

.redpacket-header {
  text-align: center;
  margin-bottom: 80rpx;
}

.redpacket-title {
  font-size: 32rpx;
  color: #ffd700;
  font-weight: bold;
  text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.3);
}

.redpacket-content {
  flex: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  text-align: center;
  z-index: 1;
}

.redpacket-desc,
.redpacket-amount {
  font-size: 48rpx;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.3);
}

.redpacket-desc {
  font-size: 48rpx;
}

.redpacket-amount {
  font-size: 68rpx;
}

.redpacket-footer {
  margin-top: 30rpx;
  text-align: center;
}

.redpacket-wish {
  font-size: 24rpx;
  color: #ffd700;
  text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.3);
}

.redpacket-decoration-top {
  position: absolute;
  top: 20rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 80rpx;
  height: 80rpx;
  border: 4rpx solid rgba(255, 215, 0, 0.3);
  border-radius: 50%;
  opacity: 0.5;
}

.redpacket-decoration-bottom {
  position: absolute;
  bottom: 20rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 60rpx;
  border: 4rpx solid rgba(255, 215, 0, 0.3);
  border-radius: 50%;
  opacity: 0.3;
}
</style>
